<template>
	<a-spin :spinning="loading">
		<a-card>
			<section slot="title">商品分类管理</section>
			<a-row :gutter="16">
				<a-col :span="5">
					<span class="label">ID：</span>
					<a-input :max-length="100" allow-clear v-model="searchDate.id" placeholder="请输入Id" />
				</a-col>

				<a-col :span="5">
					<span class="label">商品类型：</span>
					<a-select v-model="searchDate.spuType" style="flex: 1;" allowClear>
						<a-select-option value="0">普通商品</a-select-option>
						<a-select-option value="1">推荐商品</a-select-option>
						<a-select-option value="2">新用户专享</a-select-option>
						<a-select-option value="3">老用户专享</a-select-option>
					</a-select>
				</a-col>


				<a-col :span="8">
					<a-button class="ml-18" type="primary" @click="search">查询</a-button>
					<a-button class="mx-8" @click="reset">重置</a-button>
					<a-button @click="getEdit" class="mx-8" type="primary">新增</a-button>
					<a-button type="primary" ghost class="ml-10 border-5" @click="exportTable">导出</a-button>
				</a-col>
			</a-row>
			<!-- 表格 -->
			<a-table :dataSource="data" :columns="columns" align="center" class="mt-16 order-table">
				<template #picUrl="picUrl, data">
					<PreviewImage v-if="data.picUrl" :value="getPhotos(data.picUrl)" />
				</template>
				<template #action="action, data">

					<div class="flex items-center justify-between">
						<a-button @click="getEdit(data)" class="mr-10" type="primary">
							编辑
						</a-button>
						<a-button @click="goCharts(data)" style="background: 	#32CD32;" type="primary">
							查看
						</a-button>
						<a-button @click="delect(data)" class="ml-10 mr-10" type="danger">
							删除
						</a-button>
						<!-- <a-button style="background-color: #FFD700;" type="primary">
				  重置
				</a-button> -->
					</div>
				</template>
			</a-table>
			<!-- end -->
		</a-card>

		<!-- 新增 -->
		<a-modal v-model="showModal">
			<a-form >
				<a-form-item label="分类名称">
					<a-input placeholder="请输入">
					</a-input>
				</a-form-item>
				<a-form-item label="分类图标">

					<PreviewImage :showUpload="isShow" class="mt-12" :is-preview="false" :scene="8"
						
						@uploadSuccess="success_upload" v-decorator="[
					  `picUrl`,
					  {
					    rules: [{ required: true, message: '请上传图片', type: 'array' }],
					    initialValue: []
					  }
					]" />
				</a-form-item>
			</a-form>
		</a-modal>
		<!-- end -->



	</a-spin>
</template>
<script>
	import classManage from '@/api/classManage'
	import {
		tableMixins
	} from '@/utils/mixins'

	function add0(m) {
		return m < 10 ? '0' + m : m
	}
	const defineDate = {

	}
	export default {
		mixins: [tableMixins],
		data() {
			return {
				searchDate: {
					id: null, //分类编号
					name: null, //分类名称
					spuType: null,
					type: 0
				}, // 搜索数据
				loading: false,
				data: [],
				columns: [{
						title: 'ID',
						dataIndex: 'id',
						key: 'id',
						align: 'center'
					}, {
						title: '名称',
						dataIndex: 'name',
						key: 'name',
						align: 'center'
					}, {
						title: '图片',
						dataIndex: 'picUrl',
						align: 'center',
						width: 70,
						scopedSlots: {
							customRender: 'picUrl'
						}
					}, {
						title: '商品类型',
						dataIndex: 'spuType',
						key: 'spuType',
						align: 'center',
						customRender(text, record) {
							console.log(text)
							if (text == 0) {
								return '普通商品'
							} else if (text == 1) {
								return '推荐商品'
							} else if (text == 2) {
								return '新用户专享'
							} else {
								return '老用户专享'
							}
						}
					}, {
						title: '创建时间',
						dataIndex: "createTime",
						key: 'createTime',
						align: 'center',
						customRender(value) {
							var time = new Date(value);
							var y = time.getFullYear();
							var m = time.getMonth() + 1;
							var d = time.getDate();
							var h = time.getHours();
							var mm = time.getMinutes();
							var s = time.getSeconds();

							let result = y + '-' + add0(m) + '-' + add0(d) + ' ' + add0(h) + ':' + add0(mm);
							return result
						}
					},
					{
						title: '操作',
						fixed: 'right',
						dataIndex: 'action',
						width: 160,
						scopedSlots: {
							customRender: 'action'
						},
						align: 'center'
					},
				],
				showModal: true,
				formData: defineDate,
				isShow: true,

			}
		},
		computed: {

		},
		watch: {

		},
		mounted() {
			classManage.get({
				type: 0
			}).then(res => {
				this.data = res;
				console.log(res, 'res', this.data)
			})
		},
		methods: {
			get_list() {
				classManage.get(this.searchDate).then(res => {
					this.data = res;
					console.log(res, 'res', this.data)
				})
			},
			search() {
				this.get_list()
			},
			getPhotos(img) {

				return img.split(",")
			},
			getFormgetFileLength(type) {
				return get(type, 'length') || 0
			},
			success_upload(e){
				console.log(e,'upload')
				this.formData.picUrl=e.path;
			}
		}
	}
</script>
<style lang="less" scoped>
	.ant-col {
		margin-bottom: 20px;
		display: flex;
		align-items: center;

		.label {
			flex-shrink: 0;
			width: 86px;
			text-align: right;
			font-size: 14px;
			color: #595959;
		}

		.w-full {
			flex: 1;
		}
	}
</style>